<!-- Main Navbar-->
<header class="header">
    <nav class="navbar">
        <!-- Search Box-->
        <div class="search-box">
            <button class="dismiss"><i class="icon-close"></i></button>
            <form id="searchForm" action="#" role="search">
                <input type="search" placeholder="What are you looking for..." class="form-control">
            </form>
        </div>
        <div class="container-fluid">
            <div class="navbar-holder d-flex align-items-center justify-content-between">
                <!-- Navbar Header-->
                <div class="navbar-header">
                    <!-- Navbar Brand --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                    <!-- 这里可以接受数据改成客户的标题 -->
                    <div class="brand-text d-none d-lg-inline-block"><span>太平洋影城 </span><strong>后台管理系统</strong></div>
                    <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>后台管理系统</strong></div></a>
                    <!-- Toggle Button--><a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                </div>
                <!-- Navbar Menu -->
                <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                    <!-- Notifications-->
                    <li class="nav-item dropdown" id="header_notification">
                        <a id="notifications" rel="nofollow" data-target="#" href="javascript:void(0)" data-toggle="dropdown"  class="nav-link"><i class="fa fa-bell-o"></i></a>
                        <ul aria-labelledby="notifications" class="dropdown-menu">
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-envelope bg-green"></i>You have 6 new messages </div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-upload bg-orange"></i>Server Rebooted</div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
                                    <div class="notification-time"><small>10 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>view all notifications                                            </strong></a></li>
                        </ul>
                    </li>
                    <!-- Logout -->
                    <li class="nav-item"><a href="login.html" class="nav-link logout"> <span class="d-none d-sm-inline">登出</span><i class="fa fa-sign-out"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<script>


    $(function() {
        // 先刷新一次前端
        getMsg();

        // 虽然有点蠢 但是能实现实时刷新
        var ref = setInterval(function(){
            getMsg();
        },15*1000);

        function getMsg() {
            $.ajax({
                url: "/customerbackend/getNotifyMsg",
                data: {
                    db: "filmforcustomer"
                },
                type: "get",
                success: function (data) {
                    var content = "";
                    if (data.length == 0) {
                        content += "<a id=\"notifications\" rel=\"nofollow\" data-target=\"#\" href=\"javascript:void(0)\" data-toggle=\"dropdown\"  class=\"nav-link\"><i class=\"fa fa-bell-o\"></i></a>\n" +
                            "                        <ul aria-labelledby=\"notifications\" class=\"dropdown-menu\">\n" +
                            "                            <li><a rel=\"nofollow\" href=\"#\" class=\"dropdown-item\">\n" +
                            "                                <div class=\"notification\">\n" +
                            "                                    <div class=\"notification-content\"><i class=\"fa fa-envelope bg-green\"></i> 没有未读的新订单信息 </div>\n" +
                            "                                    <div class=\"notification-time\"><small></small></div>\n" +
                            "                                </div></a></li>\n" +
                            "                        </ul>"
                    } else {
                        content += "<a id=\"notifications\" rel=\"nofollow\" data-target=\"#\" href=\"javascript:void(0)\" data-toggle=\"dropdown\"  class=\"nav-link\"><i class=\"fa fa-bell-o\" onclick=\"readMsg()\"></i><span class=\"badge bg-red badge-corner\">" + data.length + "</span></a>\n";
                        content += "                        <ul aria-labelledby=\"notifications\" class=\"dropdown-menu\">\n";
                        for (var i = 0; i < data.length; i++) {
                            var temp = data[i].split("：")
                            content +=
                                "                            <li><a rel=\"nofollow\" href=\"#\" class=\"dropdown-item\">\n" +
                                "                                <div class=\"notification\">\n" +
                                "                                    <div class=\"notification-content\"><i class=\"fa fa-envelope bg-green\"></i>" + temp[0] + "</div>\n" +
                                "                                    <div class=\"notification-time\"><small>" + temp[1] + "</small></div>\n" +
                                "                                </div></a></li>\n";
                        }
                        content += "                        </ul>";
                    }
                    $("#header_notification").html(content);
                }
            });

        }
    })

    function readMsg() {
        $.ajax({
            url: "/customerbackend/readNotifyMsg",
            data: {
                db: "filmforcustomer"
            },
            type: "get",
            success: function (data) {
                console.log("已阅读所有信息")
            }
        })
    }
</script>


